// 创建一个路由器，并暴漏出去

// 1. 引入
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/pages/Home.vue';
import News from '@/pages/News.vue';
import About from '@/pages/About.vue';
import Detail from '@/pages/Detail.vue';

// 2. 创建路由器
const router = createRouter({
    history: createWebHistory(),    // 路由器的工作模式
    routes: [                       // 路由规则
        { name: 'shouye', path: '/home', component: Home },  // 在这里使用的组件称为路由组件，概念上需要区分于一般组件
        {
            name: 'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    name: 'xiangqing',
                    // params传参需要在路径中占位，即参数前加冒号(:)
                    path: 'detail/:id/:title/:content',
                    // 如果params的某个参数是可选的，那就必须在path的参数占位后面加一个?，例如：'detail/:xxx?'
                    component: Detail,
                    /**** props配置 ****/
                    // 第一种写法（重点），这条配置可以将params参数（只能是params）转换成组件的props，就像<Detail id=?? title=?? content=??/>
                    // props: true,

                    // 第二种写法（重点，推荐），写成一个函数，返回一个对象，可以自己决定将什么作为props传给组件。这种写法还能兼容query传参
                    props(route) {
                        return {
                            id: route.params.id,
                            title: route.params.title,
                            content: route.params.content,
                        }
                    }

                    // 第三种写法，写成一个对象。这种写法只能写固定值，没法像前两种写法动态传参
                    // props: {
                    //     id: 100,
                    //     title: 'title',
                    //     content: 'content',
                    // }
                },
            ]
        },
        { name: 'guanyu', path: '/about', component: About },
        // 重定向
        { path: '/', redirect: '/home' },
    ]
});

// 暴漏出去
export default router;